import {Image, Swiper, SwiperItem, Text, View} from '@tarojs/components'
import {observer} from 'mobx-react'

import './index.less'
import LogService from "../../service/LogService";
import {observable} from "mobx";
import BaseComponent from "../BaseComponent";
import DJ from "../../components/LightDffect/DJ";
import ASMR from "../../components/LightDffect/ASMR";
import ServerConfig from "../../config/ServerConfig";
import Progress from "../../components/base/LProgress"
import OCView from '../../components/OCTime'
import DSTime from "../../components/DSTime";
import Switch from '../../components/base/Switch'
import LightDeffectDatas from '../../config/LightDffectData';

@observer
class Light extends BaseComponent {

  @observable show = false;
  @observable open = false;
  @observable showChoseTime = false;
  @observable deviceId = undefined;

  @observable grayscale = 100;

  @observable sound = 50;
  @observable light = 50;

  @observable lightDffect = 'dj'; // asmr dj mix mixbo
  @observable lightDffectIndex = 0;

  getTag() {
    return "Light";
  }

  onLoad(option) {
    super.onLoad(option);

    if (!!option.deviceId) {
      this.deviceId = option.deviceId;
      LogService.debug("deviceId", this.deviceId);
    }
  }

  onReady(){
    super.onReady();
    setTimeout(() => {
      this.show = true;
    }, 500);
  }

  onOpenChage = () => {
    this.open = !this.open;
    LogService.debug("Switch onChange", this.open);

    setTimeout(this.grayscaleAnim, 50);
  }

  grayscaleAnim = () => {
    if (!this.open) {
      this.grayscale = this.grayscale + 5;
      if (this.grayscale >= 100) {
        this.grayscale = 100;
      } else {
        setTimeout(this.grayscaleAnim, 50);
      }
    } else {
      this.grayscale = this.grayscale - 5;
      if (this.grayscale <= 0) {
        this.grayscale = 0;
      } else {
        setTimeout(this.grayscaleAnim, 50);
      }
    }
  }


  // 音量变化
  onSoundChange = (value) => {
    LogService.debug("onSoundChange", value);
  }

  // 亮度变化
  onLightChange = (value) => {
    LogService.debug("onLightChange", value);
  }

  // 设置定时开机停止时间
  onOCTimeChange = (open, choseHO, choseMO, choseHC, choseMC) => {
    LogService.debug("onOCTimeChange", open, choseHO, choseMO, choseHC, choseMC);
  }

  // 设置延时关机时间
  onDSTimeChange = (open, mClose) => {
    LogService.debug("onOCTimeChange", open, mClose);
  }

  getSwiperItem = () => {
    const disabled = !this.open;

    const datas = LightDeffectDatas[this.lightDffect];

    if (this.lightDffect == 'asmr') {
      return datas.deffect.map(value => {
        const {title, size, classPrex, tipImage} = value;
        return (
          <SwiperItem>
            <ASMR title={title} size={size} classPrex={classPrex} tipImage={tipImage} disabled={disabled}/>
          </SwiperItem>
        );
      })
    } else if (this.lightDffect == 'dj') {
      return datas.deffect.map(value => {
        const {title, size, classPrex, tipImage} = value;
        return (
          <SwiperItem>
            <DJ title={title} size={size} classPrex={classPrex} tipImage={tipImage} disabled={disabled}/>
          </SwiperItem>
        );
      })
    }
  }

  getView = ()=>{

    const switchProps = {
      checked: this.open,
    };
    const moreText = "更\n多";

    const grayStyle = {
      '-webkit-filter': `grayscale(${this.grayscale}%)`
    };

    let datas = LightDeffectDatas[this.lightDffect];
    if (this.lightDffect == 'mix' || this.lightDffect == 'mixbo'){
      datas = datas[this.lightDffectIndex];
    }
    const deffect = datas.deffect[0];

    const disabled = !this.open;

    if (this.show){
      return (
        <View className='main' id='main'>
          {/*<View className='device_test' onClick={() => {*/}
          {/*  super.navigateTo(`../test/device/index`);*/}
          {/*}}>跳转到设备测试</View>*/}
          <View className='main_head'>
            <View className='main_controll'>
              <View className='light'>{datas.name}</View>
              <View className='main_oc'>
                <View className='oc'>开/关</View>
                <Switch {...switchProps} className='switch'
                        onChange={this.onOpenChage}
                />
              </View>
            </View>
            <Image className='main_img' mode='aspectFit' style={grayStyle} src={datas.img}>
            </Image>
          </View>

          <View className='progress_title'>音量</View>

          <View className='progress_view' style={grayStyle}>
            <Progress progress={this.sound} disabled={disabled} onProgress={this.onSoundChange}/>
          </View>

          <View className='progress_title'>亮度</View>
          <View className='progress_view' style={grayStyle}>
            <Progress progress={this.light} disabled={disabled} onProgress={this.onLightChange}/>
          </View>

          <View className='main_set_view'>
            <View className='main_set_item1'>
              <OCView onChange={this.onOCTimeChange}/>
            </View>
            <View className='main_set_item2'>
              <DSTime onChange={this.onDSTimeChange}/>
            </View>
          </View>

          <View className='main_light_title'>灯效选择</View>

          {
            (this.lightDffect == 'asmr' || this.lightDffect == 'dj') && <Swiper
              className={this.lightDffect == 'dj'?'main_light_swiper.dj':'main_light_swiper'}
              indicatorColor='#333'
              indicatorActiveColor='#999'
              style={grayStyle}
              vertical={false}
              circular={false}
              indicatorDots>
              {this.getSwiperItem()}
            </Swiper>
          }

          {
            (this.lightDffect == 'mix' || this.lightDffect == 'mixbo') &&
            <DJ title={deffect.title} size={deffect.size} style={grayStyle}
                classPrex={deffect.classPrex} tipImage={deffect.tipImage} disabled={disabled}/>
          }

          <View className='see_more_view' onClick={() => {
            super.navigateTo(`../version/index?deviceId=${this.deviceId}`);
          }}>
            <View className='more_img'></View>
            <Text className='more_text'>{moreText}</Text>
          </View>
        </View>
      );
    }else{
      return (
        <View className='main_load'>
          <View className='load_title'>页面加载中...</View>
        </View>
      );
    }
  }

  render() {
    return this.getView();
  }
}

export default Light
